
import React from 'react';
import { InputNumber } from "antd";
import * as THREE from 'three';
import styles from './index.module.less';

export interface IVector3InputProps {
    value?: THREE.Vector3;

    onChange?: (e: THREE.Vector3) => void;
}

export default function Vector3Input(props: IVector3InputProps) {

    const { onChange } = props;

    const [value, setValue] = React.useState(props.value || new THREE.Vector3());

    const onChangeInputNumber = React.useCallback((e: THREE.Vector3) => {
        onChange && onChange(e);
    }, [onChange])

    React.useEffect(() => {
        setValue(props.value || new THREE.Vector3())
    }, [props.value])

    return (
        <div className={styles.vector3Input} >
            <InputNumber
                size="small"
                addonBefore="x"
                value={value.x}
                onChange={e => { 
                    value.setX(e || 0); 
                    setValue(value.clone());
                    onChangeInputNumber(value.clone());
                }}
            />

            <InputNumber
                size="small"
                addonBefore="y"
                value={value.y}
                onChange={e => { 
                    value.setY(e || 0); 
                    setValue(value.clone());
                    onChangeInputNumber(value.clone());
                }}
            />

            <InputNumber
                size="small"
                addonBefore="z"
                value={value.z}
                onChange={e => { 
                    value.setZ(e || 0); 
                    setValue(value.clone());
                    onChangeInputNumber(value.clone());
                }}
            />
        </div>
    )
}